<template>
  <div class="box4" ref="map">map</div>
</template>

<script lang='ts' setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts';
// 引入中国地图的JSON数据
import chinaJSON from './china.json'
// 获取DOM元素
let map = ref()
// 注册中国地图
echarts.registerMap('china', chinaJSON as any)
onMounted(() => {
  let myechart = echarts.init(map.value)
  myechart.setOption({
    geo: {
      show: true,
      roam: true,
      zoom: 1.2,
      map: 'china',
      left: 150,
      top: 200,
      right: 100,
      bottom: 0,
      label: {
        normal: {
          show: true,
          textStyle: {
            color: '#fff',
            fontSize: 14,
            fontWeight: 400
          },
        },
      },
      // 地图高亮效果
      emphasis: {
        textStyle: {
          color: "rgb(183,185,14)"
        }
      },
      itemStyle: {
        normal: {
          areaColor: '#003669',
          borderColor: '#3fdaff',
          borderWidth: 1,
          shadowColor: 'rgba(63,218,255,0.6)',
          shadowBlur: 35,
        }
      },
      series: [
        {
          type: 'lines', //航线的系列
          data: [
            {
              coords: [
                [116.405285, 39.904989], // 起点
                [119.306239, 26.075302], // 终点
              ],
              // 统一的样式设置
              lineStyle: {
                color: 'orange',
                width: 5,
              },
            },
            {
              coords: [
                [116.405285, 39.904989], // 起点
                [114.298572, 30.584355], // 终点
              ],
              // 统一的样式设置
              lineStyle: {
                color: 'yellow',
                width: 5,
              },
            },
          ],
          //开启动画特效
          effect: {
            show: true,
            symbol: 'arrow',
            color: 'black',
            symbolSize: 10,
          },
        },
      ],
    }
  });


})

</script>

<style lang='scss' scoped></style>